<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            border: 1px solid #000;
            padding: 0 20px 20px;
            width: 11em;
        }

        #box1 p {
            word-spacing: normal;
        }

        #box2 {
            border: 1px solid #000;
            padding: 0 20px 20px;
            width: 11em;
        }

        #box2 p {
            word-spacing: 10px;
        }
    </style>
</head>

<body>
    <h2>文本的属性</h2>
    <br>
    <h3>5.规定字符的间距：letter-spacing</h3>
    <br>
    <h4>--->关键字：normal: letter-spacing:normal</h4>
    <p>默认。规定字符间没有额外的空间。</p>
    <div id="box1">
        <p>
            这是一段包含多个空格       的文字。
            这是包含一个空格 的文字。
            This is some      text. This is some text.
            This is header 1
        </p>
    </div>
    <br>

    <h4>--->关键字：length	: letter-spacing:?px	</h4>
    <p>指定具体的额外间距来增加字体的单词间距。</p>
    <p>eg:10px</p>
    <div id="box2">
        <p>
            This is some text. This is some text.
            This is header 1
        </p>
    </div>
    
    <h2>    
        <a href="./目录.html">返回目录</a>
    </h2>
</body>

</html>